<script lang="ts" setup>
/* eslint-disable */
// eslint-disable-next-line vue/no-setup-props-destructure
import { reactive, Ref, ref } from "vue";
import { unitTreeServiceApi } from "@/api/modules/org/bean/tree-service";
import ParentUnitList from "./component/parent-unit-list.vue";
import { JxtechModelFormCallback } from "@whjxtech/jxtech-component";
const emit = defineEmits<{
  (e: "add-success", data: any, res: any): void; //保存成功回调
  (e: "update-success", data: any, res: any): void; //更新成功回调
  (e: "save-success", data: any, res: any): void; //新增保存 修改保存 成功回调
}>();

const props = defineProps({
  /**主键id */
  unitId: String,
  /**父级id */
  parentUnitId: String
});

const JxtechModelFormRef = ref();
const ParentUnitListRef = ref();

const UnitData: Ref<any> = ref({ unitId: props.unitId });

const rules = {
  unitName: [{ required: true, message: "请输入部门/分公司名称", trigger: "blur" }],
  unitCode: [{ required: true, message: "请输入部门/分公司编码", trigger: "blur" }],
  unitDescription: [{ required: true, message: "请输入部门/分公司描述", trigger: "blur" }],
  unitType: [{ required: true, message: "请选择组织单元类型", trigger: "blur" }],
  privLevel: [{ required: false, message: "请选择自定义级别", trigger: "blur" }],
  orderNum: [{ required: false, message: "请输入排序号", trigger: "blur" }]
};
const UnitState = reactive({
  saveData: {
    detail: {
      insert: [],
      delete: [],
      update: []
    }
  } as any,
  primaryKey: "unitId",
  /**新增成功 */
  onAddSuccess: (formData: any, res: any) => {
    emit("add-success", formData, res);
  },
  onUpdateSuccess: (formData: any, res: any) => {
    emit("update-success", formData, res);
  },
  onSaveSuccess: (formData: any, res: any) => {
    emit("save-success", formData, res);
  },
  newBeanFunction: () => {
    return unitTreeServiceApi.add({ parentUnitId: props.parentUnitId });
  },
  // 自定义新增保存方法
  saveInsertFunction: (formData: any) => {
    UnitData.value.parentUnits.forEach((item: any, index: number) => {
      UnitState.saveData.detail.insert.push(item);
    });
    UnitState.saveData["master"] = UnitData.value;
    UnitState.saveData["status"] = "insert";
    return unitTreeServiceApi.saveUnitAndSuperUnit(UnitState.saveData);
  },
  // 自定义修改保存方法
  saveUpdateFunction: () => {
    // UnitData.value.bean_status = "edit"
    // UnitData.value.validateTableData =
    //   UnitData.value.parentUnits
    UnitData.value.parentUnits.forEach((item: any, index: number) => {
      UnitState.saveData.detail.update.push(item);
    });
    UnitState.saveData["master"] = UnitData.value;
    UnitState.saveData["status"] = "update";
    console.log(ParentUnitListRef.value.getInputBean());
    UnitState.saveData["detail"] = ParentUnitListRef.value.getInputBean();
    return unitTreeServiceApi.saveUnitAndSuperUnit(UnitState.saveData);
  },
  idFunction: () => {
    return unitTreeServiceApi.getUnitandParentUnits(
      {
        unitId: props.unitId
      },
      {}
    );
  },
  callback: {
    afterId(formData: any) {
      UnitState.parentUnits = formData.parentUnits;
    },
    afterNewBean(formData: any) {
      UnitState.parentUnits = formData.parentUnits;
    }
  } as JxtechModelFormCallback,
  parentUnits: [] as any[]
});

defineExpose({
  save: () => JxtechModelFormRef.value.save()
});
</script>
<template>
  <div>
    <jxtech-model-form
      ref="JxtechModelFormRef"
      :service-api="unitTreeServiceApi"
      :primary-key="UnitState.primaryKey"
      label-width="180px"
      :form-data="UnitData"
      :rules="rules"
      :new-bean-function="UnitState.newBeanFunction"
      :save-insert-function="UnitState.saveInsertFunction"
      :save-update-function="UnitState.saveUpdateFunction"
      :id-function="UnitState.idFunction"
      :callback="UnitState.callback"
      @add-success="UnitState.onAddSuccess"
      @update-success="UnitState.onUpdateSuccess"
      @save-success="UnitState.onSaveSuccess"
    >
      <el-row>
        <el-col :span="21" :offset="1">
          <el-row>
            <el-col :span="12">
              <jxtech-model-form-item label="部门/分公司名称" prop="unitName">
                <el-input placeholder="请输入部门/分公司名称" v-model="UnitData.unitName"></el-input>
              </jxtech-model-form-item>
            </el-col>
            <el-col :span="12">
              <jxtech-model-form-item label="部门/分公司编码" prop="unitCode">
                <el-input placeholder="请输入部门/分公司编码" v-model="UnitData.unitCode"></el-input>
              </jxtech-model-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <jxtech-model-form-item label="组织单元类型" prop="unitType">
                <JxtechDictionarySelectExt placeholder="请选择组织单元类型" codeItemId="UNIT_TYPE" v-model="UnitData.unitType">
                </JxtechDictionarySelectExt>
              </jxtech-model-form-item>
            </el-col>
            <el-col :span="12">
              <jxtech-model-form-item label="启用时间" prop="enabledDate">
                <el-input disabled v-model="UnitData.enabledDate" placeholder="自动生成"></el-input>
              </jxtech-model-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <jxtech-model-form-item label="自定义级别" prop="privLevel">
                <JxtechDictionarySelectExt
                  placeholder="请选择自定义级别"
                  codeItemId="PRIV_LEVEL"
                  v-model="UnitData.privLevel"
                >
                </JxtechDictionarySelectExt>
              </jxtech-model-form-item>
            </el-col> -->
          </el-row>

          <el-row>
            <el-col :span="24">
              <jxtech-model-form-item label="部门/分公司描述" prop="unitDescription">
                <el-input placeholder="请输入部门/分公司描述" v-model="UnitData.unitDescription"></el-input>
              </jxtech-model-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
           
            <el-col :span="12">
              <jxtech-model-form-item label="排序号" prop="orderNum">
                <el-input v-model="UnitData.orderNum"></el-input>
              </jxtech-model-form-item>
            </el-col>
          </el-row> -->
        </el-col>
      </el-row>
    </jxtech-model-form>
    <ParentUnitList ref="ParentUnitListRef" :unit-id="unitId" :parent-units="UnitState.parentUnits"></ParentUnitList>
  </div>
</template>
